<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="cu-form-group">
			<view class="title">选择产品</view>
			<picker @change="productChange" :value="index" :range="productList" range-key="title">
				<view class="picker">
					<view class="flex justify-end align-center" v-if="index > -1">
						<view class="margin-left-xs">{{productList[index].title}}</view>
					</view>
					<view v-else>
						请选择
					</view>
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">预订数量</view>
			<uni-number-box :min="1" :max="100" :value="1"  @change="changeNum"></uni-number-box>
		</view>
		
		<view class="cu-form-group">
			<view class="title">姓名</view>
			<input type="text" maxlength="4" placeholder="预订人姓名" v-model="orderData.username"/>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input type="number" maxlength="11" placeholder="预订人手机号" v-model="orderData.mobile"/>
		</view>	
			
		<view class="cu-form-group">
			<view class="title">提货时间</view>
			  <view class="example-body" @click="showDatePickClick">
			     <view class="uni-input" style="text-align: right;" >{{interviewTime.substring(0,16)}}</view>
				 <date-picker  :visible.sync="visible" :interviewTime="interviewTime" @confirmPickDate="confirmPickDate" />
			</view>
		</view>


		<view class="padding-bj flex flex-direction margin-top">
			<button @tap="confirm" :disabled="loading" class="cu-btn wanl-bg-orange lg">完成</button>
		</view>
	</view>
</template>

<script>
	import datePicker from '../../../components/date-picker/date-picker.vue';
	export default {
		data() {
			return {
				loading: false,
				orderData: {
					partner_id:'',
					username: '',					
					mobile: '',					
					goods_id: '',
					title: '',
					number: '',
					time: ''
				},
				interviewTime:'',
				visible:false,
				index: -1,
				productList: [
					{id: '3', title: '大江大河（白瓶）'},
					{id: '4', title: '大江大河（蓝瓶'}
				]
			}
		},
		components: {
		        datePicker
		    },
		onLoad(option) {
			this.orderData.partner_id = parseInt(option.id);
		},
	    mounted(){
			this.interviewTime = this.getDate()
		},
		methods: {
			//商品规格修改数量
			changeNum(val) {
	
				let num = parseInt(val);
				if(num > 100){
					this.$wanlshop.msg(`数量不能超过库存 100 件`);
					this.orderData.number = 100;
				}else{
					this.orderData.number = parseInt(val);
				}
			
			},
		    confirmPickDate(dateStr){
			   console.log('confirmPickDate',dateStr)
			   this.interviewTime = dateStr;
			   this.orderData.time = this.interviewTime
			   this.$emit("getPickDate", dateStr);
			},
			showDatePickClick(){				
				this.visible = true;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}/${month}/${day} 00:00:00`;
			},
			
			confirm(){
				let data = this.orderData;
					
				if(!data.goods_id){
					this.$wanlshop.msg('请选择产品');
					return;
				}
				if(!data.number){
					this.$wanlshop.msg('请输入预订产品数量');
					return;
				}
				
				if(!data.time){
					this.$wanlshop.msg('请输入提货时间');
					return;
				}
				if(!data.username){
					this.$wanlshop.msg('请填写真实姓名');
					return;
				}
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!data.mobile || !myreg.test(data.mobile)){
					this.$wanlshop.msg('请填写正确手机号');
					return;
				}
				this.addPreOrder(data);
				this.$wanlshop.back(1);
			},
			productChange(e) {
				this.index = e.detail.value;
				this.orderData.goods_id = this.productList[e.detail.value].id;
				this.orderData.title = this.productList[e.detail.value].title;
			},
			addPreOrder(data){
				this.loading = true;
				uni.request({
					url: '/wanlshop/ddporder/addPreOrder',
					data: data,
					method:'POST',
					success: (res) => {				
						this.$wanlshop.msg('提交成功');	
						this.loading = false;
					}
				});
			}
		}
	}
</script>

<style>
	.picker .flex image{
		width: 40rpx;
		height: 40rpx;
	}

.example-body {
        width: 270px;
        height: 30px;
		background-color: #fff;
	}

</style>
